<style>
    body{
        background: red;
    }
</style>
<img src="2.png"/>
<script>
    async function downloadImage(url, filename) {
  try {
    // 使用 fetch 获取图片数据
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    // 将 Response 对象转换为 Blob
    // 读取响应体为 ArrayBuffer
    const data = await response.arrayBuffer();

    // 创建 Blob 对象
    const blob = new Blob([data], { type:'image/jpeg' });

    // 创建一个 Blob 链接
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = filename || 'image.png'; // 设置文件名，默认为 image.png
    link.innerText = 'Download Image';

    // 添加到 body 并触发 click 事件来开始下载
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link); // 清理
  } catch (error) {
    console.error('Error downloading the image:', error);
  }
}

// 调用函数
downloadImage('./drawing.png', 'maaaa.jpeg');
</script>